<template>
  <div class="anotherToi">
      <div class="page_left">
          <div class="left_top">
              <div class="sheet1">
                <div id="male_toilet" :style="{width: '100%', height: '100%'}" ></div>
            </div>
            <div class="sheet1_info">
                <div class="kla" v-for="(item,index) in man" :key="item+index">
                    <p >{{item[0]}}：{{item[1]}}</p>
                    <span>{{item[2]}}</span> 
                </div>
            </div>
          </div>
          <div class="left_bottom">
              <div class="sheet2">
                <div id="female_toilet" :style="{width: '100%', height: '100%'}" ></div>
            </div>
            <div class="sheet2_info">
                <div class="kla" v-for="(item,index) in woman" :key="item+index+33">
                    <p >{{item[0]}}：{{item[1]}}</p>
                    <span>{{item[2]}}</span> 
                </div>
            </div>
          </div>
      </div>
      <div class="page_center">
          <div class="center_top">
              <div class="cenTop_title">
                  <p>今日客流量</p>
              </div>
              <div class="cenTop_number">
                  <p v-for="(item,index) in total" :key="item+index">{{item}}</p>
              </div>
              <div class="cenTop_count">
                  <p>昨日客流量<span>{{yesterday}}</span></p>
                  <p>当月客流量<span>{{month}}</span></p>
              </div>
          </div>
      </div>
      <div class="page_right">
          <div class="right_top">
              <div class="sheet1_top">
                <p>年用水量：{{water.year}}</p>
                <p>月用水量：{{water.month}}</p>
                <p>日用水量：{{water.day}}</p>
            </div>
            <div class="rightSheet1">
                <div id="waterQuantity" :style="{width: '100%', height: '100%'}" ></div>
            </div>
          </div>
          <div class="right_bottom">
              <div class="sheet2_top">
                <p>年用电量：{{electric.year}}</p>
                <p>月用电量：{{electric.month}}</p>
                <p>日用电量：{{electric.day}}</p>
            </div>
            <div class="rightSheet2" style="padding-left:10px">
                <div id="electricQuantity" :style="{width: '100%', height: '100%'}" ></div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import {getToiletDetailData} from '../../api'
export default {
    data() {
        return {
            total:[],
            electric:{},
            man:{},
            water:{},
            woman:{},
            visitors:{},
            useingPerson:0,
            woman_data:{},
            man_data:{},
            yesterday:0,
            month:0
        }
    },
    watch:{
        '$route'(to,from){
            if (to.query && from.query && to.query.number !== from.query.number) {
                this.getToiletData()       
            }
        }
    },
    mounted(){
        this.getToiletData()
    }, 
    methods:{
        async getToiletData(){
            let number = this.$route.query.number
            let res = await getToiletDetailData(number)
            this.electric = res.electric
            this.man = Object.values(res.man)
            this.water = res.water
            this.woman = Object.values(res.woman)
            this.woman_data = res.woman_data.man_data
            this.man_data = res.man_data
            this.useingPerson = res.woman_data.people.today
            let aa = String(this.useingPerson).split('')
            while(aa.length<4){
                aa.unshift('0')
            }
            this.total = []
            aa.map(item=>{
                this.total.push(Number(item))
            })
            this.yesterday = res.woman_data.people.yesterday
            this.month = res.woman_data.people.month
            this.initEcharts()
        },
        initEcharts(){
            let female_toilet = this.$echarts.init(document.getElementById('female_toilet'))
            // 绘制图表
            female_toilet.setOption({
				tooltip: {
                    trigger: 'axis'
                },
                color:"#00effe",
                legend: {
                },
                textStyle: {
                    color:'#00effe', // 工艺等文字颜色
                    fontSize:'15'
                },
                radar: [
                    {
                        indicator:this.woman_data.key,
                        radius: 80,
                        splitLine: {
                            lineStyle: {
                                color: '#00effe' //圆线
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        areaStyle: {},
                        data: [
                            {
                                value: this.woman_data.value
                            }
                        ]
                    },
                ]
            });

            let male_toilet = this.$echarts.init(document.getElementById('male_toilet'))
            // 绘制图表
            male_toilet.setOption({
				tooltip: {
                    trigger: 'axis'
                },
                color:"#00effe",
                legend: {
                },
                textStyle: {
                    color:'#00effe', // 工艺等文字颜色
                    fontSize:'18'
                },
                radar: [
                    {
                        indicator: this.man_data.key,
                        radius: 80,
                        splitLine: {
                            lineStyle: {
                                color: '#00effe' //圆线
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        areaStyle: {},
                        data: [
                            {
                                value: this.man_data.value
                            }
                        ]
                    },
                ]
            });

            let waterQuantity = this.$echarts.init(document.getElementById('waterQuantity'))
            // 绘制图表
            waterQuantity.setOption({
				tooltip: {
                    trigger: 'axis'
                },
                textStyle: {
                    color:'#00f0ff'
                },
                //x轴信息样式
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日'],
                    //坐标轴颜色
                    axisLine:{
                        lineStyle:{
                            color:'#b9ecf5'
                        },
                        axisLabel:{
                            interval:0,//横轴信息全部显示
                            rotate:0,//-30度角倾斜显示
                            fontSize:'14'
                        }
                    },
                    
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter:'{value}L',
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#b9ecf5'
                        }
                    }
                },
                grid: {
                    left: 45
                },
                series: [
                    {
                        name:'用水量',
                        type:'line',
                        stack: '总量',
                        symbolSize:8,
                        color:['#00f0ff'],
                        smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                        itemStyle:{
                            normal:{
                                lineStyle:{
                                    width:2,
                                    type:'solid'  //'dotted'虚线 'solid'实线
                                }
                            }
                        },
                        data:[150, 232, 201, 154, 190, 0, 0]
                    }
                ]
            });

            let electricQuantity = this.$echarts.init(document.getElementById('electricQuantity'))
            // 绘制图表
            electricQuantity.setOption({
				tooltip: {
                    trigger: 'axis'
                },
                textStyle: {
                    color:'#00f0ff'
                },
                //x轴信息样式
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日'],
                    //坐标轴颜色
                    axisLine:{
                        lineStyle:{
                            color:'#b9ecf5'
                        },
                    },
                    axisLabel:{
                        interval:0,//横轴信息全部显示
                        rotate:0,//-30度角倾斜显示
                        fontSize:'10'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter:'{value}KW'
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#b9ecf5'
                        }
                    }
                },
                grid: {
                    left: 50
                },
                series: [
                    {
                        name:'用水量',
                        type:'line',
                        stack: '总量',
                        symbolSize:8,
                        color:['#00f0ff'],
                        smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                        itemStyle:{
                            normal:{
                                lineStyle:{
                                    width:2,
                                    type:'solid'  //'dotted'虚线 'solid'实线
                                }
                            }
                        },
                        data:[38, 46, 57, 49, 51, 0, 0]
                    }
                ]
            });
        }
    }
}
</script>

<style lang="less">
.anotherToi{
    height: 80vh;
    background: url(../../assets/img/bg_anotherToi.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    padding: 3vh 2% 7vh 2%;
    .page_left{
        width: 29%;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        .left_top, .left_bottom{
            height: 47%;
            display: flex;
            justify-content: space-between;
            .sheet1, .sheet2{
                width: 60%;
                margin-top: 3vh;
            }
            .sheet1_info, .sheet2_info{
                width: 35%;
                height: 80%;
                font-size: 16px;
                color: #00f0ff;
                margin-top: 3%;
                .kla{
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
    .page_center{
        width: 33%;
        height: 100%;
        .center_top{
            height: 50%;
            .cenTop_title{
                color: #00f3fc;
                font-size: 25px;
                letter-spacing: 5px;
                padding: 16px;
                p{
                    margin: 0;
                }
            }
            .cenTop_number{
                color: #0dfffe;
                display: flex;
                justify-content: space-between;
                padding: 1vh 4%;
                font-size: 75px;
                p{
                    width: 19%;
                    margin: 0;
                    text-align: center;
                    background: url(../../assets/img/bg_today.png) no-repeat;
                    background-size: 100% 100% ;
                }
            }
            .cenTop_count{
                color: white;
                padding: 1vh 4%;
                margin-top: 3vh;
                p{
                    font-size: 21px;
                    margin-bottom: 3vh;
                    span{
                        margin-left: 16%;
                        font-size: 37px;
                        display: inline-block;
                        width: 33%;
                        text-align: center;
                        background: #437098;
                        border-radius: 10px;
                    }
                }
                p:nth-of-type(2) span{
                    background: #314c9e;
                }
            }
        }
    }
    .page_right{
        width: 29%;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        .right_top, .right_bottom{
            height: 47%;
            .sheet1_top, .sheet2_top{
                color: #00f0ff;
                height: 30%;
                margin-left: 50%;
                font-size: 16px;
                margin-top: 1.8vh;
                p{
                    margin: 0
                }
            }
            .rightSheet1, .rightSheet2{
                height: 82%;
                margin-top: -36px;
            }
        }
    }
}
</style>